<template>
  <el-space>
    <el-button @click="getList" :loading="loading" type="primary">搜索</el-button>
    <el-button @click="reset" type="info">重置</el-button>
    <slot></slot>
    <el-link v-if="showFold" type="primary" :underline="false" @click="onFold">
      {{ fold ? '展开' : '收起'
      }}<el-icon>
        <ArrowDown v-if="fold" />
        <ArrowUp v-else />
      </el-icon>
    </el-link>
  </el-space>
</template>

<script setup lang="ts">
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
const emit = defineEmits(['onFlod'])
const props = defineProps({
  /**
   * 是否显示展开收起按钮
   */
  showFold: { type: Boolean, default: true },
  /**
   * 搜索按钮的加载状态（非必须）
   */
  loading: Boolean,
  /**
   * 重置的默认值，不会重置该默认值
   */
  resets: { type: Object, default: null },
  /**
   * 是否清空全部值
   */
  cleanExtra: { type: Boolean, default: true }
})

const getList = inject<any>('getList')
const resetList = inject<any>('resetList')

const reset = () => {
  resetList(props.cleanExtra, props.resets)
  getList()
}

const fold = ref(true)
const onFold = () => {
  fold.value = !fold.value
  emit('onFlod', !fold.value)
}
</script>
